import React from 'react';
import { HeaderNav, FooterCourse } from 'components';
import Banner from './components/banner'
import Desc from './components/desc'
import Level from './components/level'
import VideoSwiper from './components/videoSwiper'
import SubTitle from './components/subTitle'
import System from './components/system'
import CourseList from './components/courseList'
import Program from './components/program'
import progVideoImg from 'images/course/video.png'


import http from 'libs/http'
import './index.less'
import Helmet from 'react-helmet';
import { _alert, bodyScrollTop } from 'libs/utils'
import YuyueModal from 'components/YuyueModal';

class Long_program extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      programList: [],
      showYuyueModal: false,
      courseData: {},
      progVideoUrl: '',
      videoList: [
        {
          src: "http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg",
        },{
          src: "http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg",
        },{
          src: "http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg",
        },
      ]
    }
  }

  componentDidMount() {
    this.checkRoleType()
    this.getCoursePackageList()
  }

  getVideoList() {

  }

  checkRoleType = () => {
    http.get('/role/getRole').then(res => {
      res.data && this.setState({
        authority: res.data
      })
    })
  }

  getCoursePackageList = () => {
    http.get('/student/business/getCoursePackageList').then(res => {
      res.data.map(item => {
        if(item.courseName === '编程') {
          this.setState({ programList: item.packages })
        }
      })
    })
  }

  createOrder = (packageId, name, price) => () => {
    // http.post({
    //   url: '/student/business/createOrder',
    //   data: { packageId },
    //   success: res => {
    //     if(res.data) {
    //       this.props.history.push(`/student-pay/${name}/${res.data}/${price}`)
    //     }else {
    //       this.props.history.push('/stu/passwordLogin')
    //     }
    //   }
    // })
    http.post('/student/business/createOrder', { packageId }).then(res => {
      if(res.data) {
        this.props.history.push(`/student-pay/${name}/${res.data}/${price}`)
      }else {
        this.props.history.push('/stu/passwordLogin')
      }
    })
  }

  handleSubscribe = (course) => () => {
    const { authority } = this.state
    const { history } = this.props
    if(authority !== 'STUDENT') {
      _alert('用户未登录，点击确定跳转登录页面').close(()=>{
        history.push('/stu/passwordLogin')
      })
    }else {
      this.setState({
        showYuyueModal: true,
        courseData: course
      })
    }
  }

  handleClick = () => {
    const { authority } = this.state
    const { history } = this.props
    if(authority !== 'STUDENT') {
      _alert('用户未登录，点击确定跳转登录页面').close(()=>{
        history.push('/stu/passwordLogin')
      })
    }else {
      history.push('/student/wodeyuyue')
    }
  }

  getDescVideoUrl = () => {
    http.get('/student/common/getPublicByCode?code=BIAN_CHENG_TV').then(res => {
      const progVideoUrl = res.data.TV_URL
      this.setState({ progVideoUrl })
    })
  }

  handleBannerBtnClick = () => {
    bodyScrollTop(1800, 300)
  }

  render() {
    const { programList, showYuyueModal, courseData, videoList, progVideoUrl } = this.state
    return (
      <div className="long-program-container-pad">
        <Helmet title="龙编程" />
        <HeaderNav history={this.props.history} />
        <Banner handleBannerBtnClick={this.handleBannerBtnClick} />
        <Desc getDescVideoUrl={this.getDescVideoUrl} progVideoUrl={progVideoUrl} progVideoImg={progVideoImg} />
        <Level />
        <VideoSwiper videoList={videoList} />
        <CourseList programList={programList} createOrder={this.createOrder} />
        <System />
        <Program />
        <YuyueModal
          visible={showYuyueModal}
          courseData={courseData}
          closeYuyueModal={()=>{this.setState({showYuyueModal: false})}}
        />

        <FooterCourse />
      </div>
    )
  }
}

export default Long_program
